<template>
	<div>
		<el-input v-model="keyWords" size="mini" prefix-icon="el-icon-search" placeholder="按Enter查找作品名..." @clear="initWorksList"
		 clearable @keydown.enter.native="initWorksList" style="width: 300px; margin-right: 10px;"></el-input>
		<el-button size="mini" type="primary" @click="initWorksList">搜索</el-button>
		<el-divider><i class="el-icon-mobile-phone">在线打分</i></el-divider>
		<el-alert title="评审时间为报名截止后的一天时间" type="success" :description="howTime" show-icon>
		</el-alert>
		<el-table :data="worksList" stripe style="width: 100%">
			<el-table-column prop="worksName" label="作品名称" fixed width="150">
			</el-table-column>
			<el-table-column prop="users.username" label="学生名" width="130">
			</el-table-column>
			<el-table-column prop="createTime" label="该作品首次提交时间" width="250">
			</el-table-column>
			<el-table-column prop="competition.endTime" label="开始评审的时间" width="250">
			</el-table-column>
			<el-table-column prop="startCheck" label="是否开始评分" width="150">
			</el-table-column>
			<el-table-column prop="group.groupName" label="所属分组" width="150">
			</el-table-column>
			<el-table-column prop="competition.cname" label="所属比赛" width="180">
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="250">
				<template slot-scope="scope">
					<el-button size="mini" :type="scope.row.checkEnd == '未结束'? 'success':'infor'" @click="lookWorksDetail(scope.$index, scope.row)">查看详情</el-button>
					<template v-if="scope.row.annexUrl != null">
						<a :href="'/file/'+scope.row.annexUrl">
							下载作品附件
						</a>
					</template>

				</template>
			</el-table-column>


		</el-table>
		<el-dialog title="作品打分" :visible.sync="dialogFormVisible">
			<el-form :model="works">
				<el-form-item label="作品名称" :label-width="formLabelWidth">
					<el-input v-model="works.worksName" :disabled="true" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="行业调研分析" :label-width="formLabelWidth">
					<el-input v-model="works.industryAnalysis" type="textarea" :rows="6" :disabled="true" autocomplete="off"></el-input>
				</el-form-item>

				<div style="display: flex; align-items: center; justify-content: center;  flex-wrap:wrap ;">
					<template v-for="item in works.images">
						<el-image :src="'/file/'+item.photo" style="width: 1000px; height: 650px; border-radius: 10px; margin: 5px;" />
						</el-image>
					</template>
				</div>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="display: flex; justify-content: center; align-items: center; margin-bottom: 15px;flex-direction:column;">

					<el-alert type="success">以下对各项成绩进行打分，最终自动算出平均成绩</el-alert>
					<el-alert type="info">设计图</el-alert>
					<el-input size="mini" placeholder="设计图~" v-model="work.a" style="width: 300px;margin: 15px;"></el-input>
					<el-alert type="info">海报图</el-alert>
					<el-input size="mini" placeholder="海报图~" v-model="work.b" style="width: 300px;margin: 15px;"></el-input>
					<el-alert type="info">网站主题风格</el-alert>
					<el-input size="mini" placeholder="网站主题风格~" v-model="work.c" style="width: 300px;margin: 15px;"></el-input>
					<el-alert type="info">网站吸引程度</el-alert>
					<el-input size="mini" placeholder="网站吸引程度~" v-model="work.d" style="width: 300px;margin: 15px;"></el-input>
					<el-alert type="info">行业调研分析</el-alert>
					<el-input size="mini" placeholder="行业调研分析~" v-model="work.e" style="width: 300px;margin: 15px;"></el-input>
				</div>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit" :disabled="disabled">提交评审结果</el-button>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	export default {
		name: 'Scoring',
		data() {
			return {
				user: JSON.parse(window.sessionStorage.getItem("user")),
				worksList: [],
				groupsList: [],
				worksId: "",
				keyWords: "",
				dialogFormVisible: false,
				formLabelWidth: "100px",
				works: {},
				work: {
					id: 0,
					a: 0,
					b: 0,
					c: 0,
					d: 0,
					e: 0,
					totalScore1: 0, //总分
					totalScore: 0, //往后台传的是计算之后平均的分数
					averageScore: 0,
					comCondition: {
						designPer: 20,
						posterPer: 20,
						themeStylePer: 20,
						attactionPer: 20,
						analysisPer: 20,
					}
				},
				howTime: "",
				disabled: false,
			}
		},
		mounted() {
			this.initWorksList();
			this.initCompetitionList();
		},
		methods: {
			submit() {
				if (this.work.a > 100 || this.work.a <= 0) {
					return this.$notify({
						title: '警告',
						message: '设计图分数不在规范范围之内！',
						type: 'warning'
					});
				}
				if (this.work.b > 100 || this.work.b <= 0) {
					return this.$notify({
						title: '警告',
						message: '海报图分数不在规范范围之内！',
						type: 'warning'
					});
				}
				if (this.work.c > 100 || this.work.c <= 0) {
					return this.$notify({
						title: '警告',
						message: '网站主题风格分数不在规范范围之内！',
						type: 'warning'
					});
				}
				if (this.work.d > 100 || this.work.d <= 0) {
					return this.$notify({
						title: '警告',
						message: '网站吸引程度评分不在规范范围之内！',
						type: 'warning'
					});
				}
				if (this.work.e > 100 || this.work.e <= 0) {
					return this.$notify({
						title: '警告',
						message: '调研分析分数不在规范范围之内！',
						type: 'warning'
					});
				}
				this.work.totalScore1 = Number(this.work.a) * (this.work.comCondition.designPer / 100) +
					Number(this.work.b) * (this.work.comCondition.posterPer / 100) +
					Number(this.work.c) * (this.work.comCondition.themeStylePer / 100) +
					Number(this.work.d) * (this.work.comCondition.attactionPer / 100) +
					Number(this.work.e) * (this.work.comCondition.analysisPer / 100);
				this.work.totalScore = Math.trunc(Number(this.work.totalScore1));
				let url = "/works/scoring/?workId=" + this.works.id +
					"&totalScore=" + this.work.totalScore + "&reviewerId=" + this.user.id + "&competitionId=" + this.works.competitionId;
				this.getRequest(url).then(res => {
					this.disabled = true;
					this.work = {};
					return;
				})
			},
			getWorkDetail() {
				this.getRequest("/works/detail/?id=" + this.works.id).then(res => {
					if (res) {
						console.log(res);
						this.works = res.obj;
					}
				})
			},
			//点击查看详情，校验是否打过分。
			lookWorksDetail(index, data) {
				//获取本场比赛的打分占比
				this.getRequest("/competition/getComCondition/?id=" + data.competitionId).then(res => {
						if (res) {
							console.log(res);
							this.works.comCondition = res.obj;
						}
						return;
					}),
					console.log(data);
				this.works.id = data.id;
				this.getWorkDetail();
				this.dialogFormVisible = true;
				this.getRequest("/competition/checkScoring/?reviewerId=" +
					this.user.id + "&workId=" + this.works.id + "&competitionId= " + data.competitionId).then(res => {
					if (res) {
						if (res.obj == 0) {
							this.disabled = false;
							return;
						}
						this.disabled = true;
					}
				})
			},
			initWorksList() {
				this.getRequest("/works/getCheckWorks/?keyWords=" + this.keyWords +
					"&groupId=" + this.user.groupId).then(res => {
					if (res) {
						this.worksList = res.obj.data;
						this.total = res.obj.total;
					}
				})
			},
			sizeChange(currentSize) {
				this.size = currentSize;
				this.initWorksList();
			},
			currentChange(currentPage) {
				this.page = currentPage;
				this.initWorksList();
			},
			initCompetitionList() {
				this.getRequest("/competition/").then(res => {
					return;
				})
			},
		},
	}
</script>

<style>
</style>
